<!--
 * @Author: tushan
 * @Date: 2022-03-04 18:41:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-05 22:08:15
 * @Description:
-->
<template>
  <div class="table-com">
    <el-table :border="border" ref="multipleTableRef" :data="tableData.list" :height="height" row-class-name="table-row"
      @selection-change="handleSelectionChange">
      <transition v-for="(item, index) in tableConfig" :key="index">
        <el-table-column v-if="item.type === 'selection'" :align="item.align" fixed type="selection" width="55" />
        <el-table-column v-else :align="item.align" :fixed="item.fixed" :label="item.name" :max-width="item.maxWidth"
          :propKey="item.prop" :width="item.width || ''">
          <template #default="scope">
            <div :class="item.align || 'left'">
              <!-- 如果附带了slot参数，则采用slot插槽内容，否则使用默认模板 -->
              <slot v-if="item.slot" :name="item.slot" :row="scope.row"></slot>
              <!-- 控制操作类型 -->
              <div v-else-if="item.type === 'control'" :class="['control', item.class]">
                <div v-if="item.button && item.button.length">
                  <!-- 按钮类型 -->
                  <div class="table-btn">
                    <div v-for="(ite, i) in item.button" :key="i">
                      <el-button :type="ite.typeof" :size="ite?.size" @click="callClick(ite, scope.row, scope.$index)">
                        {{ ite.text }}
                      </el-button>
                    </div>
                  </div>
                </div>
                <div v-if="item.link && item.link.length">
                  <!-- 链接类型-->
                  <div v-for="(ite, i) in item.link" :key="i">
                    <router-link :to="callTo(ite, scope.row, scope.$index)">
                      <el-link :type="ite.typeof" @click="callClick(ite, scope.row, scope.$index)">
                        {{ ite.text }}
                      </el-link>
                    </router-link>
                  </div>
                </div>
              </div>
              <!-- 图片类型 -->
              <div v-else-if="item.type === 'image'" :class="[item.class]">
                <el-image :preview-src-list="[getKeyValue(scope.row, item)]" :src="getKeyValue(scope.row, item)"
                  class="table-img" preview-teleported />
              </div>
              <!-- 默认内容渲染 并且如果有class则绑定class -->
              <div v-else :class="[item.class]" @click="callClick(item, scope.row, scope.$index)">
                <transition v-if="item.format">
                  <!-- 如果有自定义文本渲染为富文本 -->
                  <span @click="callClick(item, scope.row, scope.$index)"
                    v-html="callFormat(item, scope.row, scope.$index)"></span>
                </transition>
                <transition v-else>
                  <!-- 默认文本 -->
                  {{ getKeyValue(scope.row, item) }}
                </transition>
              </div>
            </div>
          </template>
        </el-table-column>
      </transition>
    </el-table>
    <Paginate class="ml15 mr15" v-if="isShowPage" :page="page" />
  </div>
</template>
<script>
import { defineComponent, reactive, ref, watch } from 'vue';
import Paginate from '@/components/paginate/index.vue';
import { ElTable } from 'element-plus';
import { formatTime } from '@/util/tools';

export default defineComponent({
  components: { Paginate },
  props: {
    border:{
      value:Boolean,
      default:false
    },
    tableList: Object,
    tableConfig: Object,
    height: String,
    page: Object,
    isShowPage: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    const emit = context.emit; //可通过emit('event',value)像组件标签发送事件 通过@event接收
    const multipleTableRef = ref();
    const multipleSelection = ref([]);
    const page = reactive(props.page || {});
    //表格的高度
    const height = ref(props.height);
    //表格列表数据
    const List = props?.tableList;
    const tableData = reactive({ list: List });
    //表格配置数据
    const config = props?.tableConfig;
    const tableConfig = reactive(config);
    //多选
    const handleSelectionChange = (val) => {
      multipleSelection.value = val;
      tableConfig?.forEach((element) => {
        //查找是否有selection类型的配置，回调已选择的列表
        if (element.type == 'selection') {
          element.select && element.select(val);
        }
      });
    };
    // 回调路由跳转事件
    const callTo = (enevt, row, index) => {
      if (enevt.path) {
        return enevt.path(row, index);
      }
      return '/';
    };
    // 回调点击事件
    const callClick = (enevt, row, index) => {
      enevt.click && enevt.click(row, index);
      return true;
    };
    // 自定义内容钩子
    const callFormat = (enevt, row, index) => {
      return enevt.format && enevt.format(row, index);
    };
    //获取指定的obj对象值
    const getKeyValue = (item, propInfo) => {
      const key = propInfo['prop'];
      try {
        const data = eval(`item.${key}`);
        if (data != null || data != undefined) {
          if (propInfo.type && propInfo.type == 'time') {
            //如果是time类型，则自动转换为时间格式
            return formatTime(data);
          }
          return data;
        }
        //检查是否有设置空值后的默认数据
        if (propInfo?.defaultText) {
          return propInfo?.defaultText;
        }
        return null;
      } catch (error) {
        console.error(error);
        return null;
      }
    };
    //监听表格数据的变化，然后处理变化后的一些数据，例如刷新表格，目前不需要强制刷新，
    watch(
      () => props.tableList,
      (e) => {
        tableData.list = e;
      }
    );
    return {
      page,
      height,
      tableData,
      tableConfig,
      handleSelectionChange,
      multipleTableRef,
      getKeyValue,
      callTo,
      callClick,
      callFormat,
    };
  },
});
</script>
<style lang="less" scoped>
.table-com {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgb(242, 242, 242);
}

.right {
  margin-left: auto;
}

.center {
  margin: auto;
}

.table-btn {
  display: flex;
  justify-content: center;

  div:not(:first-child) {
    margin-left: 10px;
  }
}
</style>
